import { useState } from 'react';
import { View } from '@tarojs/components';
import Modal from '@/components/Modal';
import dayjs from 'dayjs';
// import { getFirstDay } from '@/utils/utils';
import AppointtmentTime from '../AppointmentTime';
import AppointtmentWeek from '../AppointmentWeek';

export default function ({ show, currentDate, currentTime, onChange, onClose }) {
  const [currentDay, setCurrentDay] = useState(currentDate);
  const [activeTime, setActiveTime] = useState(currentTime);

  const onDayChange = (timestamp: any) => {
    setCurrentDay(timestamp);
    setActiveTime({});
  };

  const onTimeChange = (time: any) => {
    console.log('time: ', time);
    setActiveTime(time);
    onChange({
      name: `${dayjs(currentDay).format('YYYY-MM-DD')} ${time.title} ${time.name}`,
      value: `${dayjs(currentDay).format('YYYY-MM-DD')} ${time.value}`,
    });
  };

  return (
    <Modal title="选择时间" show={show} onClose={onClose} className="time-modal-container">
      <View className="appointment-time">
        <AppointtmentWeek active={currentDay} onChange={onDayChange} />
        <AppointtmentTime active={activeTime} onChange={onTimeChange} />
      </View>
    </Modal>
  );
}
